<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    img {
      border: none;
    }

    #banner {
      width: 600px;
      height: 400px;
      background: skyblue;
      margin: 50px auto;
      position: relative;
    }

    #banner .banner_slide {
      width: 600px;
      height: 400px;
    }

    #banner .banner_slide img {
      width: 600px;
      height: 400px;
    }

    #banner .banner_slide .slide_one {
      width: 600px;
      height: 400px;
      display: none;
    }

    .banner_nav {
      width: 200px;
      height: 40px;
      position: absolute;
      /* background: blue; */
      bottom: 40px;
      left: 50%;
      display: flex;
      justify-content: space-around;
      margin-left: -100px;
    }

    .banner_nav li {
      width: 30px;
      height: 30px;
      background: red;
      border-radius: 50%;
      cursor: pointer;
    }

    .banner_nav .active {
      background: blue;
    }

    .prev,
    .next {
      position: absolute;
      top: 35%;
      font-size: 50px;
      color: white;
      font-family: "黑体";
      background: rgba(0, 0, 0, 0.5);
      cursor: pointer;
    }

    .prev {
      left: 20px;
    }

    .next {
      right: 20px;
    }
  </style>
</head>

<body>
  <div id="banner">
    <!-- 图片部分 -->
    <div class="banner_slide">
      <div class="slide_one" style="display: block;">
        <img src="./img/1.png" alt="">
      </div>
      <div class="slide_one">
        <img src="./img/2.png" alt="">
      </div>
      <div class="slide_one">
        <img src="./img/3.png" alt="">
      </div>
      <div class="slide_one">
        <img src="./img/4.png" alt="">
      </div>
    </div>
    <!-- 圆点部分 -->
    <ul class="banner_nav">
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <!-- 左右按钮部分 -->
    <div class="banner_ctrl">
      <span class="prev">&lt;</span>
      <span class="next">&gt;</span>
    </div>
  </div>
  <script>
    window.onload = function () {

      var num = 0;//公共显示下标
      var divs = document.querySelectorAll(".banner_slide div");
      var lis = document.querySelectorAll(".banner_nav li");
      //下标++的自动轮播--------------------------
      function move() {
        num++;
        if (num > divs.length - 1) {
          num = 0;
        }
        slideChange() //改变函数
      }
      var timer = null;//定时器
      timer = setInterval(move, 2000)
      // -----------------------------------------------------------
      // 点击小圆点  让公共下标 变为当前点击下标
      for (var i = 0; i < lis.length; i++) {
        lis[i].index = i;//给每个li绑定一个自定义下标
        lis[i].onclick = function () {
          num = this.index; //让公共下标等于小圆点下标
          slideChange()
        }
      }
      // 鼠标移入轮播图 停止自动轮播-----------------------------
      var banner = document.getElementById("banner");
      banner.onmouseenter = function () {
        clearInterval(timer)
      }

      //鼠标移开轮播图 继续轮播
      banner.onmouseleave = function () {
        timer = setInterval(move, 2000)
      }
      // 右点击
      var next = document.querySelector(".next");
      next.onclick = function () {
        move()
      }
      // 左按钮点击  下标-- 
      var prev = document.querySelector(".prev");
      prev.onclick = function () {
        num--;
        if (num < 0) {
          num = divs.length - 1;
        }
        slideChange()
      }
      // 轮播图改变方法--------------------------------------------
      function slideChange() {
        // 让所有的div消失  让所有li 移除active的class
        for (var i = 0; i < divs.length; i++) {
          divs[i].style.display = "none";
          lis[i].className = "";
        }
        // 让当前下标div 显示  让当前下标li 加上active的class
        divs[num].style.display = "block"
        lis[num].className = "active";
      }

    }
  </script>
</body>

</html>